<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title=""
    width="80%"
    :closable="false"
    okText="审核"
    :showFooter="false"
  >
    <template #title v-if="!$slots.title">
      <header-com :info="detailInfo.info" />
    </template>

    <Tabs v-model:activeKey="activeKey" type="card" @change="handleTab">
      <TabPane key="1" tab="费用明细">
        <ledger-com :data="detailInfo.feeDetailList" />
      </TabPane>
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import HeaderCom from './HeaderCom.vue';
  import LedgerCom from './LedgerCom.vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { ref, reactive } from 'vue';
  import { getShippingSettleDetail } from '@/api/eslogis-tps/index';
  // import { useMessage } from '@/hooks/web/useMessage';

  // const { createMessage } = useMessage();
  const activeKey = ref('1');
  const id = ref('');
  let detailInfo: any = reactive({
    info: {}, // 详情信息
    feeDetailList: [], // 费用明细列表
  });

  // 接收参数
  const [register] = useDrawerInner((data: any) => {
    id.value = data.id;
    getDetail(data.id);
  });

  // 获取运单详情
  function getDetail(id) {
    getShippingSettleDetail({ id, type: 1 }).then((res) => {
      console.log('getShippingOrderDetail-res', res);
      detailInfo.info = res;
      detailInfo.feeDetailList = res.feeDetailList;
    });
  }

  // tab切换
  function handleTab(val) {
    console.log('handleTab', val);
  }
</script>
